    @import './mixin';
    //TODO: scss注释补全
    #header{
        z-index:20;
        background:rgba(0,0,0,0.4);
        width:30px;
        height:30px;
        line-height: 13px;
        text-align: center;
        border-radius: 50%;
        color:white;
    }
    #footer{
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-around;
        padding: 8px 2px;
        position:fixed;
        bottom: 0px;
        z-index: 10;
        box-shadow: 0px -6px 8px 0px 
		rgba(185, 185, 185, 0.1);
        .collect{
            img{
                width: 17px;
                height: 17px;
                vertical-align: middle;
            }
            span{
                line-height: 44px;
                font-size: 13px;
                color: #666;
                display: inline-block;
                margin: {
                    left: 5px;
                }
            }
        }
        .freebtn{
            width: 100%;
            height: 44px;
        }
    }
	.cellone{
		border-radius:9px 9px 9px 9px;
	}
	.titles{
        width:100%;
		position:relative;
		top:-30px;
		z-index:1;
		background:white;
        border-radius: 15px 15px 0 0;
        .choice{
            position: absolute;
            right: 20px;
            width: 29px;
            height: 32px;
            top: -3px;
        }
        >div:first-child{
            height:68px;
            padding:14px 0 22px 30px;
            >div:first-child>h5{
                letter-spacing: 0px;
                line-height: 22px;
                font-size:19px;
                color:#333333;
                font-weight:500;
            }
        }
        >div:nth-child(3){
            padding:15px 0 15px 45px;
            color:#6C6C6C;
            border-bottom:1px solid #f4f4f4;
            img{
                width: 9px;
                height: 13px;
                margin-right: 7px;
            }
        }
        >div:nth-child(4){
            padding:15px 0 15px 45px;
            color:#6C6C6C;
            img{
                width: 10px;
                height: 10px;
                margin-right: 5px;
            }
        }
        .uls{
            border-top:1px solid #f4f4f4;
            border-bottom:1px solid #f4f4f4;
            padding:10px 10px 10px 10px;
            .bor{
                border-right:1px solid #f4f4f4;
                text-align: center;
                font-weight: 200 !important;
                h3{
                    font-size:20px;
                    font-weight:500;
                }
                h5{
                    font-size:13px;
                }
            }
            .blu{
                color:#007BFF;
                text-align: center;
                font-weight: 200;
            }
            .las{
               text-align: center; 
               h3{
                    font-size:20px;
                    font-weight:500;
                }
                h5{
                    font-size:13px;
                }
            }
        }
	}   
	.mui-content>img{
		width:100%;
	}
	.firstcard{
        margin-top:-30px;
		background:white;
		padding-bottom:30px;
        border-top: 10px solid #f4f4f4;
        .top{
            height:60px;
            line-height: 60px;
            border-bottom: 1px solid #f4f4f4;
            >h3{
                font-size:19px;
                color:#333333;
                font-weight:500;
                padding:20px 0 20px 30px;
            }
        }
        >div:nth-child(2){
            >.mui-row{
                padding-top:10px;
                >div:first-child>h4{
                    font-size: 14px;
                    color:#8F8F94;
                    padding-left:30px;
                    font-weight: 400;  
                }
                >div:nth-child(2)>h4{
                    font-size:14px;
                    font-weight: 400;
                    margin-left:15px;
                    color:#333333;
                }
            } 
        }
    }
    .secondCard{
        >li{
            >div{
                >div{
                    div:nth-child(2){
                        color:#333333;
                    }
                }
            }
        }
    }
        ul.mui-table-view:before{height:0}
        ul.mui-table-view:after{height:0}
        ul{
            border-top:10px solid #f4f4f4;
            background:white;
            &:before{
                height: 0;
            }
            &:after{
                height: 0;
            }
            li{
                &:after{
                    height: 0;
                }
                .top{
                    height:60px;
                    line-height: 40px;
                    font-size:19px;
                    color:#333333;
                    font-weight:500;
                }
                >div:nth-child(2){
                    padding-bottom:30px;
                    >.mui-row{
                        padding-top:10px;
                        >div:first-child>h4{
                            font-size: 14px;
                            color:#8F8F94;
                            padding-left:15px;
                            font-weight: 400;  
                        }
                        >div:nth-child(2)>h4{
                            font-size:14px;
                            font-weight: 400;
                            margin-left:15px;
                        }
                    }
                }
            }
        }
	.advantage{
        background:white;
        border-top: 10px solid #f4f4f4;
        >.top{
            height:60px;
            line-height: 60px;
            border-bottom: 1px solid #f4f4f4;
            >h3{
                font-size:19px;
                color:#333333;
                font-weight:500;
                padding:20px 0 20px 30px;
            }
        }
        >div.mui-row{
            padding:20px 0px 20px 30px;
            text-align: center;
            >div>img{
                width: 40px;
                height: 40px;
            }
            >div{
                width:80px;
                >h5{
                    color: #444;
                    font-size: 13px;
                    padding:8px 8px;
                    border-radius:2px;
                    background:#ebf0f2;
                    color:#587a99;
                    text-align: center;
                    margin-right:5px;
                }
            }
        }
    }
    .periphery{
		background: white;
        margin:0px 0;
        border-top: 10px solid #f4f4f4;
        border-bottom:10px solid #f4f4f4;
        >img{
            width: 100%;
        }
        >.top{
            height:60px;
            line-height: 60px;
            text-align: center;
           >h3{
                font-size:19px;
                color:#333333;
                font-weight:500;
                padding:20px 0 20px 30px;
            } 
        }
        >div:nth-child(2){
            padding-left:15px;
            padding-right:15px;
            #secondmap{
                width:100%;
                height:280px;
                margin-bottom:15px;
                background: white;
                overflow:hidden;
            }
        }
        >ul{
            padding:0 10px;
            // margin-top:20px;
            border-top:0 !important;
            display: flex;
            justify-content: space-between;
            >li{
                list-style: none;
                float:left;
                >div{
                    text-align: center;
                    &:nth-child(1){
                        height:45px;
                        >img{height:60%;width:60%;}
                    }
                    &:nth-child(2){
                        font-size:0.8em;
                    }
                }
            }
        }
	}
    .active{
        color:orange;
    }
    #popover{
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
        width:90%;
        height:300px;
		padding:25px 30px;
        background:white;
        border-radius:3px;
        >div:nth-child(1){
            display:flex;
            justify-content: space-between;
            >h4{
                font-size:20px;
                font-weight:400;
                margin-bottom:30px;
            }
            >span{
                font-size:50px;
                font-weight:100;
            }
        }
        >div:nth-child(2){
            >form{
                >input:nth-child(1){
                    height:60px;
                    border-radius:3px 3px 0 0;
                    border:none;
                    background:rgb(245,245,245);
                    margin:0;
                    border-bottom:1px solid #E6E6E6;
                }
                >input:nth-child(2){
                    height:60px;
                    border-radius:0 0 3px 3px;
                    border:none;
                    background:rgb(245,245,245);
                    margin:0;
                }
            }
        }
        >div:nth-child(3){
            text-align: center;
            margin-top:20px;
            >button{
                width:100%;
                height:50px;
                border-radius:48px;
            }
        }
    }
	